<template>
  <el-badge :value="num" :max="99" class="message-badge">
    <svg-icon icon-class="messages" @click="goto" />
    <!--    <el-popover
          placement="bottom-end"
          width="400"
          :offset="5"
          trigger="hover">
          <Message />
          <svg-icon slot="reference" icon-class="messages" @click="goto" />
        </el-popover>-->
  </el-badge>
</template>

<script>
import Message from './message.vue'
import { getUnreadNum } from '@/api/message'
export default {
  name: 'Message',
  components: {
    Message
  },
  data() {
    return {
      num: 0
    }
  },
  created() {
    this.getUnread()

    this.$bus.on('read', () => {
      this.getUnread()
    })
  },
  methods: {
    goto() {
      this.$router.push('/user/message')
    },

    // 未读消息数
    getUnread() {
      getUnreadNum().then(res => {
        this.num = res.data
      })
    }
  }
}
</script>
<style lang="scss">
.message-badge{
  svg {
    color: #fff;
    font-size: 20px;
    position: relative;
    top: 3px;
  }
  .el-badge__content {
    top: 8px!important;
    right: 15px!important;
  }
}
</style>
